import React, {useRef, useState,useEffect } from 'react';
import '../static/css/ArticleList.css'
import { List ,Row ,Col , Modal ,message ,Button,Switch} from 'antd';
import axios from 'axios'
import  servicePath  from '../config/apiUrl'
const {consirm} = Modal

// 文章列表【删除编辑文章操作】

function ArticleList(props){
    const [list,setList]=useState([])
    const getdata=()=>{
        axios({
        method:'post',
        url:servicePath.getArticleList,
        withCredentials: true

        }).then((res)=>{
        console.log(res)
        //因为有赋值改变list数据所以useEffect自动监听会调用
           setList(res.data.data)
        })
    }
    useEffect(()=>{
        getdata()
    },[])
   const changedata=(id)=>{
        //  var id = e.target.getAttribute('data-key')
                //  var id = e.target.dataset.dataKey
       console.log(id)
        props.history.push('/index/add?id='+id)
    }
    return (
        <div>
            <List
             header={
                <Row className="list-div">
                <Col span={8}>
                    <b>标题</b>
                </Col>
                <Col span={3}>
                    <b>类别</b>
                </Col>
                <Col span={3}>
                    <b>发布时间</b>
                </Col>
                <Col span={3}>
                    <b>集数</b>
                </Col>
                <Col span={3}>
                    <b>浏览量</b>
                </Col>

                <Col span={4}>
                    <b>操作</b>
                </Col>
            </Row>

            }
            bordered
            dataSource={list}
            renderItem={item=>{
                return(
                    <List.Item>
                    <Row className="list-div">
                        <Col span={8}>
                            {item.title}
                        </Col>
                        <Col span={3}>
                         {item.typeName}
                        </Col>
                        <Col span={3}>
                            {item.addTime}
                        </Col>
                        <Col span={3}>
                            共<span>{item.part_count}</span>集
                        </Col>
                        <Col span={3}>
                          {item.view_count}
                        </Col>

                        <Col span={4}>
                            {/* HTML5中添加了data-*的方式来自定义属性，dataset获取 $(“testDiv”).data(“cartcd”,”新值”) react可以通过ref操作dom,也可以利用useref结合*/}
                          <Button type="primary" onClick={()=>{changedata(item.Id)}}  data-key={item.Id}>修改</Button>&nbsp;
                          <Button >删除 </Button>
                        </Col>
                    </Row>

                </List.Item>
                )
            }}
            >

            </List>
        </div>
    )
}

export default ArticleList